<template>
    <codemirror v-model="code" placeholder="Code goes here..." :style="{ height: '450px' }" :autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" @ready="handleReady" @change="change"/>
    <el-button @click="updateValue()">确定</el-button>
</template>
<script setup>
import { Codemirror } from 'vue-codemirror'
import { html } from '@codemirror/lang-html'
import { oneDark } from '@codemirror/theme-one-dark'
import { ref, shallowRef } from 'vue'
import {ElButton} from "element-plus"
const props = defineProps(["info"])
const emit = defineEmits(["updateCode"])
const code = ref(props.info)
const extensions = [html(), oneDark]

// Codemirror EditorView instance ref
const view = shallowRef()
const handleReady = (payload) => {
  view.value = payload.view
}

// Status is available at all times via Codemirror EditorView
const getCodemirrorStates = () => {
  const state = view.value.state
  const ranges = state.selection.ranges
  const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
  const cursor = ranges[0].anchor
  const length = state.doc.length
  const lines = state.doc.lines
  // more state info ...
  // return ...
}
const change = (event) => {
  console.log(event);
}
const updateValue = () => {
  console.log("code", code);
  emit("updateCode", code.value)
}
</script>